﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html lang="zh-CN">
  
  <head>
    
    <%@ include file="/WEB-INF/include/meta.jsp"%>
    <%@ include file="/WEB-INF/include/css.jsp"%>
    
  </head>
  <!-- end header -->
  <body>
    <div class="page-group">
      <div class="page page-current">
        <header class="bar bar-nav course-header">
          <a href="${ctx.host}/course-schedules?start=${startDate}" class="button button-link button-nav pull-left"><span class="icon icon-left"></span></a>
          <h1 class="title">添加休息时间</h1>
        </header>
        <fmt:formatDate var="day" value="${currentDay}" pattern="yyyy-MM-dd"/>
        <div class="content bg-white">
          <div class="buttons-tab">
            <p class="button course-rest-button" style="color:#fff;">
              <fmt:formatDate value="${currentDay}" pattern="yyyy-MM-dd"/>&nbsp;&nbsp;
              <fmt:formatDate value="${currentDay}" pattern="E"/>
            </p>
          </div>
          <div class="content-block-title" style="margin-top: .65rem;">可工作时间
            <a class="pull-right arrange-rest" data-type="rest" href="javascript:void(0);">添加休息</a>
            <!-- <a class="pull-right arrange-rest" data-type="experience" href="javascript:void(0);" style="margin-right:10px;">添加体验课</a> -->
          </div>
          <ul class="week" style="margin-top: .25rem;">
            <li class="week-item add-rest-item" style="min-height:50px;">
              <div class="item-content add-rest-content avaliable-hour">
                <div class="row">
                  <c:choose>
                    <c:when test="${empty avaliableHours}">
                      <p class="text-center">暂无可工作时间</p>
                    </c:when>
                    <c:otherwise>
                      <c:forEach var="avaliableHour" items="${avaliableHours}">
                        <c:choose>
                          <c:when test="${!today}">
                            <div class="col-25"><a href="javascript:void(0);" data-dayhour="${day}|${avaliableHour}" class="${fn:contains(dutyCalendars, avaliableHour) ? 'duty-calendar' : ''}">${avaliableHour}</a></div>
                          </c:when>
                          <c:when test="${today and persist.compareHour(avaliableHour)}">
                            <div class="col-25"><a href="javascript:void(0);" data-dayhour="${day}|${avaliableHour}" class="${fn:contains(dutyCalendars, avaliableHour) ? 'duty-calendar' : ''}">${avaliableHour}</a></div>
                          </c:when>
                        </c:choose>
                      </c:forEach>
                    </c:otherwise>
                  </c:choose>
                </div>
              </div>
            </li>
          </ul>
          
          <div class="content-block-title" style="margin-top: .65rem;">休息
            <a class="pull-right cancel-rest" data-type="rest" href="javascript:void(0);">删除</a>
          </div>
          <ul class="week" style="margin-top: .25rem;">
            <li class="week-item add-rest-item" style="min-height:50px;">
              <div class="item-content add-rest-content rest-hour">
                <div class="row">
                  <c:choose>
                    <c:when test="${empty restCalendars}">
                      <p class="text-center">暂无休息时间</p>
                    </c:when>
                    <c:otherwise>
                      <c:forEach var="restCalendar" items="${restCalendars}">
                        <c:choose>
                          <c:when test="${!today}">
                            <div class="col-25"><a href="javascript:void(0);" data-dayhour="${day}|${restCalendar}" class="rest">${restCalendar}</a></div>
                          </c:when>
                          <c:when test="${today and persist.compareHour(restCalendar)}">
                            <div class="col-25"><a href="javascript:void(0);" data-dayhour="${day}|${restCalendar}" class="rest">${restCalendar}</a></div>
                          </c:when>
                          <c:otherwise>
                            <div class="col-25"><a data-dayhour="${day}|${restCalendar}" class="disabled">${restCalendar}</a></div>
                          </c:otherwise>
                        </c:choose>
                      </c:forEach>
                    </c:otherwise>
                  </c:choose>
                </div>
              </div>
            </li>
          </ul>
          
          <%-- <div class="content-block-title" style="margin-top: .65rem;">体验课
            <a class="pull-right cancel-rest" data-type="experience" href="javascript:void(0);">删除</a>
          </div>
          <ul class="week" style="margin-top: .25rem;">
            <li class="week-item add-rest-item" style="min-height:50px;">
              <div class="item-content add-rest-content experience-hour">
                <div class="row">
                  <c:choose>
                    <c:when test="${empty experienceCalendars}">
                      <p class="text-center">暂无体验课时间</p>
                    </c:when>
                    <c:otherwise>
                      <c:forEach var="experienceCalendar" items="${experienceCalendars}">
                        <c:choose>
                          <c:when test="${!today}">
                            <div class="col-25"><a href="javascript:void(0);" data-dayhour="${day}|${experienceCalendar}" class="experience">${experienceCalendar}</a></div>
                          </c:when>
                          <c:when test="${today and persist.compareHour(experienceCalendar)}">
                            <div class="col-25"><a href="javascript:void(0);" data-dayhour="${day}|${experienceCalendar}" class="experience">${experienceCalendar}</a></div>
                          </c:when>
                          <c:otherwise>
                            <div class="col-25"><a data-dayhour="${day}|${experienceCalendar}" class="disabled">${experienceCalendar}</a></div>
                          </c:otherwise>
                        </c:choose>
                      </c:forEach>
                    </c:otherwise>
                  </c:choose>
                </div>
              </div>
            </li>
          </ul> --%>
          
        </div>
      </div>
    </div>
    
    <%@ include file="/WEB-INF/include/script.jsp"%>
    
    <d:resource type="script" root="${ctx.resource}/build" src="js/page/rest/rest-calendar-create.js">
    <script type="text/javascript">
      require(['page/rest/rest-calendar-create'], function(page) {
        page.init({
            day : "${day}", 
            start: "${startDate}",
            restSum: "${restCalendarSum}",
            coach: "${coach}",
            limit: "${restCalendarLimit}"
        })
      })
    </script>
    </d:resource>
    
  </body>
</html>